<template>
    <div>
        <div>
            <Row>
                <Col offset="2">
                    <Select v-model="selectedTag" placeholder="拍卖类型">
                        <Option key="法院拍卖" value="法院拍卖">法院拍卖</Option>
                        <Option key="公益拍卖" value="公益拍卖">公益拍卖</Option>
                        <Option key="个人拍卖" value="个人拍卖">个人拍卖</Option>
                        <Option value="">无</Option>
                    </Select>
                </Col>
                <Col>
                    只看正在拍卖
                    <i-switch v-model="alreadyOn" @on-change="changeOn"/>
                </Col>
                <Col offset="5">
                    <Input v-model="searchName" placeholder="请输入拍卖的物品名"/>
                </Col>
                <Col offset="1">
                    <Select v-model="orderName" value="price" placeholder="排序方式">
                        <Option v-for="item in orderOption" :key="item.key" :value="item.value">{{ item.key }}</Option>
                    </Select>
                </Col>
                <Col offset="1">
                    <Select v-model="asc">
                        <Option value="1">升序</Option>
                        <Option value="0">降序</Option>
                    </Select>
                </Col>
                <Col offset="1">
                    <Button type="Primary" @click="searchByName(1)">搜索</Button>
                </Col>
            </Row>
        </div>
        <Card v-if="totalProductNum===0">
            <Col class="mid">
                好像么有找到您所需的拍卖品呢
            </Col>
        </Card>
        <Card v-for="(item,index) in auctionList" :key="item.auctionId" :vlaue="item.auctionId" style="height: 300px">
            <Row>
                <Col style="height: 280px">
                    <img v-bind:src="CoverList[index]" style="height: 100%;width: auto">
                </Col>
                <Col span="12" offset="1">
                    <p>拍卖物品名：{{ item.auctionName }}</p>
                    <Row>
                        <Col>拍卖起始价格：</Col>
                        <Col style="color: orangered;font-size: large">￥{{item.auctionStartPrice}}</Col>
                    </Row>
                    <p>拍卖时间：{{ item.auctionDate }}</p>
                    <p>拍卖类型：{{ item.auctionTag }}</p>
                    <p>当前预约人数：{{ item.appointmentNum }}</p>
                    <Divider>简介</Divider>
                    <p>{{ item.auctionBrief }}</p>
                </Col>
                <Col>
                    <Row>
                        <Button @click="brief(item.auctionId)">详细信息</Button>
                    </Row>
                    <Row>
                        <Button v-if="isAppointmentList[index]" @click="cancelApp(item.auctionId,index)">取消预约</Button>
                        <Button v-else @click="appointment(index)">预约拍卖</Button>
                    </Row>
                </Col>
            </Row>
        </Card>
        <Col class="mid">
            <Page :total="totalAuctionNum" @on-change="searchByName" show-total/>
        </Col>
    </div>
</template>

<script>
    import axios from "axios";
    import globalData from "@/utils/globalData";

    export default {
        name: "AuctionShow",
        data() {
            return {
                alreadyOn:false,
                searchName: '',
                orderName: 'auctionDate',
                asc: '1',
                totalAuctionNum: 0,
                nowPage: 1,
                presentUrl:'',
                CoverList: [
                    '','','','','',
                    '','','','',''
                ],
                isAppointmentList:[],
                selectedTag: '',
                orderOption: [
                    {value: "auctionStartPrice", key: "起拍价格"},
                    {value: "auctionDate", key: "拍卖时间"},
                ],
                auctionList: []
            }
        },
        //分页获取所有拍卖物品
        created: function () {
            let self = this
            axios({
                method: 'get',
                url: 'auction/list/auctionDate/1/1'
            }).then(function (res) {
                self.auctionList = res.data.content
                self.totalAuctionNum = res.data.totalElements
                console.log(res.data)
                //试图获取封面--需要修改很多地方
                for (let i = 0; i < self.auctionList.length; i++) {
                    axios({
                        method: 'get',
                        url: "/file/sig/auction/" + self.auctionList[i].coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        //good
                        self.$set(self.CoverList,i,window.URL.createObjectURL(res.data))
                        // console.log(i+":index")
                        // console.log(self.CoverList[0])
                    })
                    //试图获取当前预约情况
                    axios({
                        method:'get',
                        url:"/auction/isApp/"+self.auctionList[i].auctionId+"/"+globalData.USER.userId
                    }).then(function (res) {
                        self.$set(self.isAppointmentList,i,res.data)
                    })
                }
            })
        },
        methods: {
            cancelApp(auctionId,index){
              let self = this
              axios({
                  method:'delete',
                  url:"auction/app/"+auctionId+"/"+globalData.USER.userId
              }).then(function () {
                  self.$Message.success("取消预约成功")
                  self.$set(self.isAppointmentList,index,false)
                  self.$set(self.auctionList[index],'appointmentNum',self.auctionList[index].appointmentNum-1)
              })
            },
            changeOn(val){
                let self =this
                let URL =''
                if(val){
                    URL="auction/On/1"
                }else {
                    URL='auction/list/auctionDate/1/1'
                }
                axios({
                    method:'get',
                    url:URL
                }).then(function (res) {
                    self.auctionList=res.data.content
                    self.totalAuctionNum=res.data.totalElements
                })
            },
            searchByName(val) {
                let self = this
                let url = ""
                this.nowPage=val
                console.log("Tag"+this.selectedTag)
                console.log("Name"+this.searchName)
                if (this.selectedTag === "") {
                    if (this.searchName === "") {//两者都空
                        console.log("null*2")
                        url = '/auction/list/' + this.orderName + "/" + this.asc + "/" + this.nowPage
                    } else {//名字不空Tag空
                        console.log("TagNull")
                        url = '/auction/ANC/' + this.searchName + "/" + this.orderName + "/" + this.asc + "/" + this.nowPage
                    }
                } else {
                    if (this.searchName === "") {//Tag不空名字空
                        console.log("NameNull")
                        url = '/auction/tag/' + this.selectedTag + "/" + this.orderName + "/" + this.asc + "/" + this.nowPage
                    } else {//都不空
                        console.log("notNull")
                        url = '/auction/ANCTAG/' + this.selectedTag + "/" + this.searchName + "/" + this.orderName + "/" + this.asc + "/" + this.nowPage
                    }
                }
                this.presentUrl=url
                console.log("URL"+url)
                axios({
                    method: 'get',
                    url: url
                }).then(function (res) {
                    self.auctionList = res.data.content
                    self.totalAuctionNum = res.data.totalElements
                    for(let i=0;i<self.auctionList.length;i++){
                        axios({
                            method: 'get',
                            url: "/file/sig/auction/" + self.auctionList[i].coverUUID,
                            responseType: 'blob'
                        }).then(function (res) {
                            //good
                            self.$set(self.CoverList,i,window.URL.createObjectURL(res.data))
                            console.log(self.CoverList[0])
                        })
                        //试图获取当前预约情况
                        axios({
                            method:'get',
                            url:"/auction/isApp/"+this.auctionList[i].auctionId+"/"+globalData.USER.userId
                        }).then(function (res) {
                            self.$set(self.isAppointmentList,i,res.data)
                        })
                    }
                })
            },
            brief(val) {
                this.$router.push({name: 'AuctionBrief', params: {auctionId: val}})
            },
            appointment(index) {
                let self = this
                axios({
                    method: 'post',
                    url: '/auction/appointment',
                    data: {
                        appointmentUserId: globalData.USER.userId,
                        appointmentAuctionId: this.auctionList[index].auctionId,
                        appointmentAuctionName: this.auctionList[index].auctionName,
                        appointmentAuctionTimeStamp: this.auctionList[index].auctionTimeStamp
                    }
                }).then(function () {
                    self.$Notice.success({
                        title: "恭喜预约成功"
                    })
                    self.$set(self.isAppointmentList,index,true)
                    self.$set(self.auctionList[index],'appointmentNum',self.auctionList[index].appointmentNum+1)
                })
            },
            handlePage(value) {
                this.nowPage = value
                this.searchByName()
            }
        }
    }
</script>

<style scoped>

</style>